<template>
  <a-config-provider :locale="zhCN">
    <div style="padding:25px;">
      <a-steps style="margin-bottom:30px" :current="currentStepNum">
        <a-step title="验证身份"/>
        <a-step title="绑定谷歌验证器"/>
        <a-step title="绑定成功"/>
      </a-steps>

      <div style="width:400px;margin:0 auto;">
        <!--        验证身份-->
        <div style="width: 100%" v-if="currentStepNum === 0">
          <a-form>
            <a-form-item>
              <a-input-password v-model:value="loginForm.password" placeholder="请输入系统登录密码"/>
            </a-form-item>
            <a-form-item>
              <a-input placeholder="请输入邮箱验证码" v-model:value="loginForm.code">
                <template #suffix>
                  <a-spin :spinning="loginForm.codeLoading">
                    <span v-if="!loginForm.disabledCode" style="color:#1890ff;cursor:pointer"
                          @click="sendCode">验证码</span>
                    <span v-else style="color:#CCCCCC">{{ loginForm.codeNum }}秒后可重发</span>
                  </a-spin>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button style="width:100%" type="primary" :loading="loginForm.nextLoading" @click="nextOne">下一步
              </a-button>
            </a-form-item>
          </a-form>
        </div>
        <!--          绑定谷歌验证器-->
        <div v-else-if="currentStepNum === 1">
          <div style="text-align: center;margin: 15px 0">
            <img style="height: 120px;width:120px" :src="bindForm.qrCodeUrl"/>
            <div style="font-size: 10px;margin-top: 10px;color: #7b7b7b">请用谷歌验证器扫一扫</div>
          </div>
          <div style="display: flex;justify-content:center">
            <a-form style="width:500px;" :labelCol="{span:5}">
              <a-form-item label="秘钥">
                <a-textarea :rows="5" v-model:value="bindForm.key"/>
              </a-form-item>
              <a-form-item label="谷歌验证码">
                <a-input v-model:value="bindForm.code"/>
              </a-form-item>
              <a-form-item label=" " :colon="false">
                <a-button style="width:100%" type="primary" :loading="bindForm.nextLoading" @click="nextTwo()">下一步
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
        <!--          绑定成功-->
        <div v-else style="text-align: center">
          <svg t="1661150388724" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               style="color: #1890ff"
               p-id="1751" width="100" height="100">
            <path
                d="M511.2879 0C229.296245 0 0 229.296245 0 511.2879s229.296245 511.2879 511.2879 511.2879 511.2879-229.296245 511.2879-511.2879S793.279555 0 511.2879 0z m0 995.515994C244.962448 995.515994 28.484006 777.613352 28.484006 511.2879S244.962448 28.484006 511.2879 28.484006s482.803894 216.478442 482.803894 482.803894c1.4242 266.325452-216.478442 484.228095-482.803894 484.228094z m215.054242-655.132128l37.029207 37.029208-283.415855 327.566064-42.726009 49.847009-38.453407-49.847009-138.147427-182.297636 37.029207-37.029207 139.571627 105.39082L726.342142 340.383866z"
                p-id="1752"></path>
          </svg>
          <p style="margin:25px 0">谷歌验证器绑定成功</p>
        </div>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import {ref, defineComponent, reactive} from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import {CheckCircleFilled} from '@ant-design/icons-vue'
import {
  sendReBindGoogleSecretEmail,
  generateGoogleSecretKey,
  generateGoogleSecretQrCode,
  resetGoogleSecretKey
} from './api/index'
import {message} from "ant-design-vue";

export default defineComponent({
  components: {
    CheckCircleFilled
  },
  setup() {
<<<<<<< HEAD
    const store = useStore()
    const getPopupContainer = reactive({})

    function dispatchResize() {
      if (document.body.clientWidth <= 800) {
        store.dispatch('change_Device', 'mobile')
      } else {
        store.dispatch('change_Device', 'pc')
=======
    const identityStr = getCaption('identityStr')
    const currentStepNum = ref(0)
    const loginForm = reactive({
      password: '',
      code: '',
      codeNum: 60,
      disabledCode: false,
      timer: null,
      codeLoading: false,
      nextLoading: false
    })
    const bindForm = reactive({
      qrCodeUrl: '',
      key: '',
      code: '',
      nextLoading: false
    })

    function getCaption(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return '';
    }

    async function sendCode() {
      loginForm.codeLoading = true

      const res = await sendReBindGoogleSecretEmail({
        identityStr,
      })
      if (res.code === 200) {
        if (loginForm.timer) return;
        loginForm.disabledCode = true
        loginForm.timer = setInterval(() => {
          if (loginForm.codeNum > 0) {
            loginForm.codeNum--
          } else if (loginForm.codeNum === 0) {
            loginForm.disabledCode = false
            loginForm.codeNum = 60
            clearInterval(loginForm.timer)
            loginForm.timer = null
          }
        }, 1000)
        message.success('验证码已发送到绑定邮箱')
>>>>>>> ef565a5701bcba84c165aa1b6895b46f8c943293
      }
      loginForm.codeLoading = false
    }

    async function fetchQrCode(key) {
      const res = await generateGoogleSecretQrCode({
        identityStr,
        secretQrCode: key
      })
      bindForm.qrCodeUrl = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    }

    async function nextOne() {
      if (!loginForm.code) return message.error('请填写验证码')
      if (!loginForm.password) return message.error('请填写密码')
      loginForm.nextLoading = true
      const res = await generateGoogleSecretKey({
        identityStr,
        verifyCode: loginForm.code,
        pwd: loginForm.password
      })
      if (res.code === 200) {
        const {secretQrCodeStr, secretKey} = res.data
        bindForm.key = secretKey
        await fetchQrCode(secretQrCodeStr)
        currentStepNum.value = 1
      }
      loginForm.nextLoading = false
    }

    async function nextTwo() {
      if (!bindForm.code) return message.error('请填写验证码')
      bindForm.nextLoading = true
      const res = await resetGoogleSecretKey({
        secretKey: bindForm.key,
        code: bindForm.code,
        identityStr
      })
      if (res.code === 200) {
        currentStepNum.value = 2
      }
      bindForm.nextLoading = false
    }

    return {
      nextOne,
      nextTwo,
      loginForm,
      bindForm,
      currentStepNum,
      zhCN,
      sendCode
    }
  }
})
</script>

<style lang="less">
#app {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
}

@primary-color: #1DA57A; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
.ant-table-thead > tr > th, .ant-table-tbody > tr > td {
  padding: 16px 12px !important;
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.avatar-uploader .imgUrl {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
